/* jsx ctrl+m*/
import React, { Component } from 'react';

class Index extends Component {
    constructor(props) {
        super(props)
        this.state = {
            msg: 'hello',
            count: 10,
            arr: ['html', 'css', 'vue']
        }
    }
    render() {
        const ListItem = this.state.arr.map(item => {
            return (<div key={item}>{item}</div>)
        })

        return (
            <div>
                <button onClick={this.handleClick.bind(this)}>{this.state.msg}</button>
                <p>
                    {this.state.arr.map(item => {
                        return (<div key={item}>{item}</div>)
                    })}
                </p>
                <div>{ListItem}</div>
            </div>
        );
    }
    handleClick(params) {
        console.log(params);
        // console.log(this);
        this.setState({
            msg: 'world'
        })
    }
}
export default Index;